import React from 'react'
import {useNavigate} from 'react-router-dom';
const Button = ({buttonText,cancelButton = false,onClickHandler}) => {
    const buttonClass = cancelButton
    ? "join_room_cancel_button":"join_room_success_button";
    return (<button className={buttonClass} onClick={onClickHandler}>
        {buttonText}
    </button>)
}

const JoinRoomButtons = ({hanleJoinRoom,isRoomHost}) => {
    const successButtonText = isRoomHost?'主持':'加入';
    const navigate = useNavigate();
    const popToRoot = () => {
        navigate('/');
    }
  return (
    <div className='join_room_buttons_container'>
        <Button buttonText={successButtonText} onClickHandler={hanleJoinRoom}/>
        <Button buttonText='取消' onClickHandler={popToRoot} cancelButton/>
    </div>
  )
}

export default JoinRoomButtons